<template>
	<div class="mapwrap">
		<div class="map-out-wrap m-t-4">
			<iframe src="/map.html" width="100%" height="100%" class="map-iframe" frameborder="0" ref="iframeRef"></iframe>
			<div class="message-map">
				<div>
					节点：{{ message?.name ? message?.name : '-' }}, 节点算力：{{ message?.hashrate ? message?.hashrate : '-' }}PFlops
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
const message = ref(null)
onMounted(() => {
  window.addEventListener("message", handleMessage);
})
onUnmounted(() => { 
  // 移除监听器
  window.removeEventListener("message", handleMessage);
})
const handleMessage = (event:any) => {
	// 阻止react-devtools消息循环
	if (event.data.source === "react-devtools-content-script") {
		return;
	}
	// 接收消息
	if(event.data?.name && event.data?.hashrate) {
		message.value = event.data;
	}
}

</script>
<style scoped lang="scss">
.mapwrap {
    height: calc(100% - 30px);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    .map-out-wrap {
      position: relative;
      height: 100%;
      .message-map {
        font-size: 18px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        padding: 20px;
        background-color: #060c18;
				border-radius: 0 10px 0 0;
      }
    }
  }
</style>